<template>
    <div class="pagination-wrap">
        <div class="pagination u-page">
            <a href="#" class="zbtn zprv js-disabled">上一页</a>
            <a href="#" class="zpgi zpg1" :class="{ 'js-selected': $route.query.index == 1 }" @click="pageSelectedHandler(1)">1</a>
            <span class="zdot" v-if="$route.query.index >= 6">...</span>
            <template v-for="i in totalPage" key="i" >
                 <a href="#"  @click="pageSelectedHandler(i)"
                v-if="i > 1  && i < totalPage && (+$route.query.index + 4 >= totalPage ? i >= totalPage - 7 : i > $route.query.index - 4 && i < +$route.query.index + 4) "
                :class="{ 'js-selected': $route.query.index == i, ['zpgi zpg' + i]: true }">{{ i }}</a>
            </template>
           

            <span class="zdot" v-if="$route.query.index <= totalPage - 5">...</span>
            <a href="#" :class="{ 'js-selected': $route.query.index == totalPage, ['zpgi zpg' + totalPage]: true }" @click="pageSelectedHandler(totalPage)">{{totalPage }}</a>
            <a href="#" class="zbtn znxt">下一页</a>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
const $router = useRouter();
const $route = useRoute();
const totalPage = ref(15);

console.log($route.query)

const pageSelectedHandler = (pageNum) => {
    $router.push({ query: { index: pageNum } })
}
</script>
<style lang="scss" scoped>
.pagination-wrap {
    .u-page {
        margin: 20px 0;
        text-align: center;
    }

    .pagination {
        font-size: 12px;
        line-height: 160%;

        .js-disabled.zprv {
            background-position: 0 -620px;
            color: #cacaca;
            cursor: default;

            &:hover {
                background-position: 0 -620px;
            }
        }


        .zbtn {
            width: 69px;
            height: 24px;
            line-height: 24px;
            color: #333;
            text-align: left;
            padding: 0;
        }

        .zbtn,
        .zpgi {
            margin: 0 1px 0 2px;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 2px;
            vertical-align: middle;
            text-decoration: none;
        }

        .zpgi {
            height: 22px;
            padding: 0 8px;
            background-color: #fff;
            line-height: 22px;

            &:hover {
                border-color: #666;
            }
        }

        .zprv {
            width: 47px;
            padding-left: 22px;
            background-position: 0 -560px;

            &:hover {
                background-position: 0 -590px;
            }
        }

        a.js-selected {
            background-position: 0 -650px;
            border-color: #a2161b;
            color: #fff;
            cursor: default;
        }

        .znxt {
            width: 57px;
            padding-left: 12px;
            background-position: -75px -560px;

            &:hover {
                background-position: -75px -590px;
            }
        }

        a.znxt.js-disabled {
            background-position: -75px -620px;
            color: #cacaca;
            cursor: default;

            &:hover {
                background-position: -75px -620px;
            }
        }

    }
}
</style>